// 视频监控

<template>
    <f7-page class="video-list">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back
                         icon-material="arrow_back"></f7-link>
            </f7-nav-left>
            <f7-nav-title>视频监控自查</f7-nav-title>
            <f7-nav-right>
                <f7-icon f7="house"
                         @click.native="fnToHome()"></f7-icon>
            </f7-nav-right>
        </f7-navbar>

        <van-notice-bar background="#fff"
                        color="#345">
            <f7-icon solt="left-icon"
                     color="#3385ff"
                     f7="layers_alt_fill"></f7-icon>
            <span>{{controlData.engineeInfo.engineeName}}</span>
        </van-notice-bar>

        <!-- <div class="gcbm fff">
            <span class="tag tag-green-fill">在施项目</span>
            <div>项目编码：{{controlData.engineeInfo.engineeCode}}</div>
        </div> -->

        <div v-if="query.data.length > 0">
            <div class="video-div">
                <div class="top">
                    <span>{{cameraName}}</span>
                </div>
                <ul class="bottom">
                    <li v-for="(item,index) in videos"
                        :key="index">
                        <img v-if="item.value"
                             :src="item.value | videoUrl"
                             onerror="javascript:this.src='static/img/center/man-png.png'" />
                        <span>{{item.name}}</span>
                    </li>
                </ul>
            </div>
        </div>

        <van-empty v-else
                   description="暂无数据" />
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller"
import Config from '@/libs/config.js'

export default class instance extends controller {
    onBeforeInit () {
        this.urls = {
            model: '/video/camera/getListModel',
            query: '/video/camera/query'
        }
    }
    onInit () {
        this.context.cameraName = this.$f7route.query.cameraName
        this.setSearch("engineeId", this.$f7route.query.engineeId, "list")
        this.context.initParams = { length: 999 }
    }
    mixin () {
        return {
            data () {
                return {
                    controlData: {
                        // 项目信息
                        engineeInfo: {}
                    },
                    cameraName: null,
                    videos: [{ name: '2022-11-02', value: null }, { name: '2022-11-02', value: null }],
                }
            },
            methods: {
                // 播放
                fnPlay (item) {
                    if (!this.$framework.account.hasPermission('project:enginee:video')) {
                        this.$f7.dialog.toast(`暂无权限查看！`);
                        return
                    }
                    this.$util.request('/video/camera/getPreviewURLs', {
                        cameraIndexCode: item.cameraIndexCode
                    }, 'post').then(res => {
                        if (res.status == 200 && res.data.success) {
                          if(window.plus.os.name.toLowerCase()=="ios"){
                            window.plus.hatom.preview(res.data.parameters.url);
                          }else{
                            window.plus.hatom.previewRetry({
                              cameraId: item.cameraIndexCode,
                              url:res.data.parameters.url,
                              title: item.cameraName
                            })
                          }
                        }else{
                          this.$f7.dialog.alert("获取预览地址失败");
                        }
                    })
                },
            },
            filters: {
                videoUrl: function (val) {
                    return `${Config.api.download}?attachmentId=${val}`
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
.video-list {
    .gcbm {
        display: flex;
        padding: 10px;

        > span {
            flex-shrink: 0;
            margin-right: 4px;
        }
    }
    .video-div {
        background: #fff;
        margin-top: 10px;
        padding: 10px;

        .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 40px;
            font-size: 15px;
            color: #243357;
            border-bottom: 1px solid #e9edf7;
            .more {
                color: #3b7ffa;
            }
        }
        .bottom {
            display: flex;
            padding-top: 15px;
            li {
                width: 31%;
                margin-right: 3%;
                display: flex;
                flex-direction: column;
                color: #929497;
                font-size: 12px;
                &:last-child {
                    margin-right: 0;
                }
                span {
                    margin-top: 5px;
                }
                img {
                    width: 100%;
                    height: 70px;
                    object-fit: fill;
                }
            }
        }
    }
}
</style>
